<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ style: { width: '70px' } }"
    :wrapper-col="{ style: { width: 'auto' } }"
    autocomplete="off"
    ref="refForm"
  >
    <a-form-item label="名称" name="name" :rules="[{ required: true, message: '请输入名称' }]">
      <a-input v-model:value="formState.name" placeholder="请输入名称" />
    </a-form-item>

    <a-form-item label="code" name="code" :rules="[{ required: true, message: '请输入角色code' }]">
      <a-input v-model:value="formState.code" placeholder="请输入角色code" />
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CreateRoleDto } from '@/api/role.api.ts'

const formState = ref<CreateRoleDto>({
  name: '',
  code: '',
})

const refForm = ref()
const submit = () => {
  return refForm.value.validateFields()
}

const clearFormState = () => {
  return refForm.value.resetFields()
}

const setFormState = (record: CreateRoleDto) => {
  formState.value = record
}

defineExpose({
  submit,
  clearFormState,
  setFormState,
})

defineOptions({
  name: 'RoleEditForm',
})
</script>
<style scoped>
.custom-table .ant-form-item {
  margin-bottom: 0;
}
</style>
